<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding: 0}
        .box{width:350px;margin: 20px auto;background: #CCCCCC;padding: 5px;box-sizing: border-box;overflow: hidden}
        .ulEle{list-style: none}
        .ulEle .liEle{font-size: 12px;float: left;margin: 5px;outline: 1px solid #999999;padding: 3px;}
    </style>
</head>
<body>
<div class="box">
    <ul class="ulEle">

    </ul>
</div>
</body>
<script>
//    var arr=["32分（20分主钻+12分副钻）","37分（20分主钻+12分副钻）","42分（20分主钻+12分副钻）","47分（20分主钻+12分副钻）","52分（20分主钻+12分副钻）","65分（20分主钻+12分副钻）","75分（20分主钻+12分副钻）"];
    window.onload=function() {
        if(window.XMLHttpRequest){
            var xhr=new XMLHttpRequest;
        }else{
            var xhr=new ActiveXObject("MicrosoftXMLHTTP");
        }
        xhr.open("GET","data/01?t="+new Date().getTime(),true);
        xhr.send(null);
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                var uls=document.getElementsByClassName("ulEle")[0];
//                var lis=uls.getElementsByTagName("li");
                var txt=eval("("+xhr.responseText+")");
                function appCld(){
                    for(var index in txt){
                        console.log(txt[index]);
                        var lis1=document.createElement("li");
                        lis1.className="liEle";
                        lis1.innerHTML=txt[index];
                        uls.appendChild(lis1);
//                        lis1.className="liEle";
//                        console.log(liEle);
                    }
                }
                appCld();
            }
        }
    }
//    function createEle(){
//        var uls=document.getElementsByClassName("ulEle")[0];
//        var lis=uls.getElementsByTagName("li");
//        for(var index1 in arr){
//            var lis1=document.createElement("li");
//            lis1.innerHTML=arr[index1];
//            uls.appendChild(lis1);
//            lis[index1].className="liEle";
//        }
//    }
</script>
</html>